<template>
  <div class="">
    <!-- 电脑端banner -->
    <div class="pCBanner">
      <img src="../assets/images/banner2@2x.jpg" style="height: 230px;">

      <div class="tuandetial">
        <div class="container">
          <div class="AuctionCom">
            <div class="tuandetialRight">
              <img :src="shopinfo.headpic" alt="" style="border-radius: 50%;">
              
            </div>
            <div class="Auctionright">
              <div class="AuctionrightTop">
                <p style="margin-right: 10px;">{{shopinfo.username}}</p>
                <p>
                  <img src="../assets/images/icon5@2x.png" >
                  {{shopinfo.shopview}}
                </p>
              </div>
              <div class="zypnav">
                <div>
                  <img src="../assets/images/p1.png" alt="">评分:{{shopinfo.grade}}
                </div>
                <div>
                  <img src="../assets/images/p2.png" alt="">{{shopinfo.isauthen==1 ? '已实名':'未实名'}}
                </div>
                <div>
                  <img src="../assets/images/p3.png" alt="">{{shopinfo.shop_deposit_yu_price}}
                </div>
                <div>
                  <img src="../assets/images/p4.png" alt="">{{shopinfo.year}}年
                </div>
              </div>
              <div class="zypnav">
                <div>
                  分类: {{goodsinfo.goods_type_name}}
                </div>
                <div>
                  预设截拍 {{goodsinfo.final_end_time}}
                </div>
                <div>
                  {{goodsinfo.logistics_name}} 快递费:{{goodsinfo.logistics_price == null?'0':goodsinfo.logistics_price}}元
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    <!-- 电脑端banner结束 -->

    <!-- 拍卖详情内容开始 -->
    <div class="TunaCom">
      <div class="container">
        <div class="TunaComTop">
          活动详情
        </div>
        <div class="TunaComConser">
          <p v-html="goodsinfo.goods_desc"></p>
        </div>
        <img v-for="(item,index) in imglist" :src="item" alt="" style="width: 100%;">

      </div>
    </div>

    <!-- 拍卖详情内容结束 -->
  </div>
</template>

<script>
  import { goodsInfo } from '@/api/utils.js'
  export default {
    name: '',
    components: {},
    props: [],
    data() {
      return {
        imglist: [],
        goodsinfo: {},
        shopinfo: {}
      }
    },
    computed: {},
    watch: {},
    created() {
      this.id = this.$route.query.id
      this.getgoodsInfo()
    },
    beforeRouteLeave(to, from, next) {
      sessionStorage.setItem('type',this.$route.query.type)
      sessionStorage.setItem('page',this.$route.query.page)
      next();
    },
    mounted() {},
    methods: {
      getgoodsInfo() {
        var that = this,
        params = {
          goods_id: this.id,
          shua: 1
        }
        goodsInfo(params).then(res => {
          if (res.Code == 1) {
            console.log(res)
            this.imglist = res.data.pics
            this.goodsinfo = res.data
            this.shopinfo = res.shopinfo
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../assets/css/basic.css");
  @import url("../assets/css/media.css");
  .tuandetialLefts{
    font-size: 1.95vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #110701;
  }
  .Auctionright{
    width: 45%;
  }
  .tuandetial{
    overflow: hidden;
  }
  .zypnav{
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .zypnav div img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .zypnav div{
    display: flex;
    align-items: center;
  }
  .container{
    padding-top: 50px;
  }
  @media only screen and (min-width: 100px) and (max-width: 998px) {
    .pCBanner{
      height: 160px!important;
      overflow: hidden;
    }
    .zypnav{
      flex-wrap: wrap;
    }
  }
</style>